<template>
  <view class="bg">

    <view class="loan-item">
      <view class="loan-item-head">
        <view class="loan-item-head-left">
          <view class="loan-item-logo">
            <image :src='prodInfo.corporationImgUrl'></image>
          </view>
          <view class="loan-item-title">
            <text class="loan-item-title-text">{{ prodInfo.productName }}</text>
            <text class="loan-item-title-desc">{{ prodInfo.productSlogan }}</text>
          </view>
        </view>
        <view class="loan-item-head-right">
          信用卡
        </view>

      </view>
      <view class="loan-item-content">
        <view class="loan-item-img">
          <image :src='prodInfo.imgUrl'></image>
        </view>
        <view class="loan-item-detail">
          <text>卡片权益：{{ prodInfo.productContent }}</text>

        </view>
      </view>
    </view>
    <view class="detail-content">
      <u-tabs :list="list" @click="click"></u-tabs>
      <view v-show="activeTabs===0">
        <view class="detail-module1">
          <text>准入要求</text>
          <view class="detail-module2">征信要求：</view>
        </view>
        <view class="detail-module1">
          <text>项目点</text>
          <view class="detail-module3" v-for="(item,index) in prodInfo.projectLocationResults" :key="index">
            <view class="detail-module2">
              {{ item.locationAddress }}
            </view>
            <view class="detail-module2">
              {{ item.locationArea }}
              {{ item.locationName }}
            </view>
          </view>

        </view>
      </view>
      <view class="detail-area" v-show="activeTabs===1">
        <view>北京市</view>
        <view>天津市</view>
        <view>河北省</view>
        <view>山西省</view>
        <view>内蒙古自治区</view>
        <view>辽宁省</view>
        <view>吉林省</view>
        <view>黑龙江省</view>
        <view>上海市</view>
        <view>江苏省</view>
        <view>浙江省</view>
        <view>安徽省</view>
        <view>福建省</view>
        <view>江西省</view>
        <view>山东省</view>
        <view>河南省</view>
        <view>湖北省</view>
        <view>湖南省</view>
        <view>广东省</view>
        <view>广西壮族自治区</view>
        <view>海南省</view>
        <view>重庆市</view>
        <view>四川省</view>
        <view>贵州省</view>
        <view>云南省</view>
        <view>西藏自治区</view>
        <view>陕西省</view>
        <view>甘肃省</view>
        <view>青海省</view>
        <view>宁夏回族自治区</view>
        <view>新疆维吾尔自治区</view>
      </view>

    </view>
    <view class="share-module">
      <button>分享产品</button>
    </view>
  </view>
</template>

<script>
import prodApi from "@/api/prodApi";
import passData from "@/api/requstUtil";

export default {
  data() {
    return {
      list: [{name: '办理指南'}, {name: '可申请区域'}],
      activeTabs: 0,
      prodInfo: {
        "productId": "850789573268135941",
        "corporationId": "850787603723640834",
        "corporationName": null,
        "corporationImgUrl": null,
        "productType": "LOAN",
        "productCategory": "enterprise",
        "productSubCategory": "prod_sub_car_loan_02",
        "productName": "222",
        "productStatus": "OPEN",
        "repaymentType": "08",
        "minQuota": null,
        "maxQuota": 60,
        "minPeriods": 10,
        "interestRateType": "year",
        "maxPeriods": 120,
        "minRate": 5.0000,
        "maxRate": 10.0000,
        "admitArea": "上海市-徐汇区,上海市-静安区,上海市-普陀区,上海市-杨浦区,上海市-闵行区,上海市-金山区,上海市-松江区,上海市-青浦区,上海市-奉贤区",
        "productSlogan": "额度高",
        "productContent": null,
        "applyQualification": "有企业纳税一年以上",
        "productFlow": "线上扫码，线下面签",
        "needMaterial": "身份证",
        "supplement": "上海市-徐汇区,上海市-静安区,上海市-普陀区,上海市-杨浦区",
        "needFaceSign": "YES",
        "imgBsnNo": null,
        "imgUrl": null,
        "updateTime": "2024-06-05 17:34:01",
        "projectLocationResults": null
      }
    }
  },
  onLoad(option) {
    const eventChannel = this.getOpenerEventChannel();
    let that = this
    eventChannel.on('getItem', function (data) {
      // that.prodInfo = data;
      console.log(data)
      prodApi.queryDetail(data).then(res => {
        let passData1 = passData(res);
        console.log('passData1', passData1)
        that.prodInfo = (passData1 || {});
      })
    })
  },
  methods: {
    toCardPage() {
      uni.navigateTo({url: '/pages/index/product/CardList'})
    },
    click({index, name}) {
      this.activeTabs = index
    },

  }
}
</script>

<style lang="scss" scoped>
.bg {
  background-color: #f7f7f7;
}

.prod-tab {
  display: flex;
  background-color: #FFFFFF;
  flex-direction: row;
  justify-content: center;
  height: 45px;
  align-items: center;

  uni-text {
    margin-left: 1px;
    margin-right: 1px;
  }
}

.loan-item {
  height: 120px;
  background-color: #FFFFFF;
  margin: 15px 15px 15px 15px;

  .loan-item-img {
    uni-image {
      width: 150px;
      height: 65px;
    }
  }

  .loan-item-head {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding-top: 3px;
    margin-left: 6px;

    .loan-item-head-left {
      display: flex;

      .loan-item-logo {
        uni-image {
          width: 45px;
          height: 45px;
        }
      }
    }

    .loan-item-head-right {
      color: #f17a7a;
      padding-right: 12px;
    }
  }


  .loan-item-title {
    display: flex;
    flex-direction: column;

    .loan-item-title-text {
      font-weight: bold;
      color: #000000;
    }

    .loan-item-title-desc {
      background-color: #fef3e4;
      color: #f08163;
      width: fit-content;
      padding: 2px;
    }
  }

  .loan-item-content {
    display: flex;
  }

  .loan-item-detail {
    font-size: 14px;
    color: #aaaaaa;
    display: flex;
    flex-direction: column;
  }
}

.detail-content {
  height: auto;
  background-color: #FFFFFF;
  margin: 15px 15px 15px 15px;
  padding: 10px 20px;


  .detail-module1 {
    font-weight: bold;
    padding: 10px 8px 25px 8px;
    border-bottom: solid 1px #ccc;
  }

  .detail-module2 {
    font-weight: initial;
  }
  .detail-module3 {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 2px;
  }
  .detail-area{
    uni-view{
      font-size: 14px;
      padding-top: 2px;
      padding-bottom: 2px;
      font-weight: bold;
      margin-left: 20px;
    }
  }
}
.share-module {
  margin-top: 20px;
  margin-bottom: 20px;


  uni-button {
    width: 200px;
    color: #f05f5d;
    background: rgba(0, 0, 0, 0);
    border: 1px solid #f05f5d;
  }
}


</style>
